
/*900  网页使用颜色*/
.color0 {background: #015A5A; }
.color1 {background: #004d40; }
.color2 {background: #123F3F; }
.color3 {background: #143841; }
.color4 {background: #063047; }
.color5 {background: #263238; }
.color6 {background: #141F26; }
.color7 {background: #181B1D; }
.color8 {background: #212121; }
.color9 {background: #3e2723; }


/*  网页框架搭建   */
html{overflow: hidden}
body{margin:0px;padding:0px;}
/* 字体颜色*/
h1,h4,h5,a,ul,li,table,p{color:#fbc02d; font-family:STKaiti,KaiTi,serif;}
b{color:#c0392b;}
/*  网页文字排版   */
h1{font-size: 23px;}
h4{font-size: 20px;margin-bottom:25px;margin-top:25px;}
h5{font-size: 16px;font-weight:normal;}
li{font-size: 15px;padding: 40px 0px 0px 0px;list-style-type:none;}
ul{margin-bottom:5px;margin-top:5px;}
h4{margin-bottom:5px;margin-top:5px;}
a{font-size: 15px;padding: 10px 0px 0px 0px;}

h2{
    color:#fbc02d;
    font-size: 50px;
    margin-left:40px;
    margin-bottom:15px;
    margin-top:15px;
    font-family:STXingkai,STKaiti,serif;
    font-weight:normal;
    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.6);/*增加字体阴影*/
    }

p{
    display:'';
    text-align:left;
    position:relative;
    font-size: 14px;
    width:280px;
    padding: 5px 5px 5px 5px;
    box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.3);
    background:rgba(38,50,56,0.4);
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    -ms-border-radius:5px;
    -o-border-radius:5px;
    border-radius:5px;
    -webkit-animation:move 0.8s; /* Safari and Chrome */
    -moz-animation:move 0.8s;
    -ms-animation:move 0.8s;
    -o-animation:move 0.8s;
	animation:move 0.8s;
}
@-webkit-keyframes move{from {top:20px;}to {top:0px;}}
@-moz-keyframes move{from {top:20px;}to {top:0px;}}
@-ms-keyframes move{from {top:20px;}to {top:0px;}}
@-o-keyframes move{from {top:20px;}to {top:0px;}}
@keyframes move{from {top:20px;}to {top:0px;}}
/*内存泄漏表格*/
table{font-size: 16px;width:200px;}
td,th{text-align:center;}

.page {
    background: #3e2723;
}


.panels {
    display:  flex;
    position: relative;
    overflow: hidden;            
    bottom: 0;
    width: 3300px;
    height: 100vh;
}
.panel {
    display:inline-block;
    position: relative;
    overflow: hidden;
    width: 300px;
    height: 100%;
    -webkit-transition:width 1s;
    -moz-transition:width 1s;
    -ms-transition:width 1s;
    -o-transition:width 1s;
    transition:width 1s;
    filter: brightness(1);
}
.panel:hover{width: 600px;}
        
.panel-content, .panel-coverage{
    position: absolute;
    overflow: hidden;
    width: 240px;
    height: 100%;
    padding: 30px 30px 30px 30px;
    background-color: inherit;
}


/* case 结果展示特效 */
.panel-text {
    position: absolute;
    overflow: hidden;
    text-align:left;
    width: 300px;
    height: 100%;
    left:280px;
    padding: 30px 0px 30px 20px;
    background-color: inherit;
}

.panel-text a:before, li:before {
	display: inline-block;
	margin-right: 10px;
	content: '[';
    font-weight:bolder;
	opacity: 0;
	-webkit-transform: translateX(20px);
	-moz-transform: translateX(20px);
    -ms-transform: translateX(20px);
    -o-transform: translateX(20px);
	transform: translateX(20px);
	-webkit-transition: -webkit-transform 0.3s, opacity 0.2s;
	-moz-transition: -moz-transform 0.3s, opacity 0.2s;
    -ms-transition: -moz-transform 0.3s, opacity 0.2s;
    -o-transition: -moz-transform 0.3s, opacity 0.2s;
	transition: transform 0.3s, opacity 0.2s;
}

.panel-text a:after, li:after {
	display: inline-block;
	margin-left: 10px;
	content: ']';
    font-weight:bolder;
    opacity: 0;
	-webkit-transform: translateX(-20px);
	-moz-transform: translateX(-20px);
    -ms-transform: translateX(-20px);
    -o-transform: translateX(-20px);
	transform: translateX(-20px);
	-webkit-transition: -webkit-transform 0.3s, opacity 0.2s;
	-moz-transition: -moz-transform 0.3s, opacity 0.2s;
    -ms-transition: -moz-transform 0.3s, opacity 0.2s;
    -o-transition: -moz-transform 0.3s, opacity 0.2s;
	transition: transform 0.3s, opacity 0.2s;
}

.panel-text a:hover:after, a:hover:before, li:hover:after, li:hover:before{
	opacity: 1;
	-webkit-transform: translateX(0px);
	-moz-transform: translateX(0px);
    -ms-transform: translateX(0px);
    -o-transform: translateX(0px);
	transform: translateX(0px);
}


/*圆环*/
.ring-line {top: 80px;}
.ring-branch {top: 180px;}
.ring-condition {top: 280px;}
.ring-function {top: 380px;}

.ring-line,.ring-branch,.ring-condition,.ring-function{
    position: absolute;
    overflow: hidden;
    left: 140px;
    width: 100px;
	height: 100px;
}

/*覆盖率展示模快 */

.panel-coverage h5{
    padding-top: 20px;
    padding-bottom: 30px;
}

.file {
	display: block; /* 排列在同一行内 */
    position: absolute;
    left: 165px;
    top: 85vh;
	text-decoration: none;
    white-space : nowrap;
	font-size: 25px;
    font-family:STXingkai,STKaiti,serif;
}

.file:before {
    display: none; 
	position: absolute;
    left: 25px;
    top:37px;
	width: 100px;
	height: 100px;
	border: 2px solid rgba(251,192,45,0.3);
	border-radius: 40%;
	content: '';
	opacity: 0;
    white-space : nowrap;
    box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.4);
	-webkit-transition: -webkit-transform 0.2s, opacity 0.2s;
	-moz-transition: -moz-transform 0.2s, opacity 0.2s;
	-ms-transition: -ms-transform 0.2s, opacity 0.2s;
	-o-transition: -o-transform 0.2s, opacity 0.2s;
	transition: transform 0.2s, opacity 0.2s;
	-webkit-transform: translateX(-50%) translateY(-50%) scale(0.2);/* 将制作的圆收缩到0.2倍 */
	-moz-transform: translateX(-50%) translateY(-50%) scale(0.2);
	-ms-transform: translateX(-50%) translateY(-50%) scale(0.2);/* 将制作的圆收缩到0.2倍 */
	-o-transform: translateX(-50%) translateY(-50%) scale(0.2);
	transform: translateX(-50%) translateY(-50%) scale(0.2);
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
}

.file:after {
    display: inline-block; 
	position: absolute;
    left: 25px;
	width: 90px;
	height: 90px;
    white-space : nowrap;
	border: 6px solid rgba(251,192,45,0.3);
	border-radius: 40%;
	content: '';
	opacity: 0;
    box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.6);
	-webkit-transition: -webkit-transform 0.2s, opacity 0.2s;
	-moz-transition: -moz-transform 0.2s, opacity 0.2s;
	-ms-transition: -ms-transform 0.2s, opacity 0.2s;
	-o-transition: -o-transform 0.2s, opacity 0.2s;
	transition: transform 0.2s, opacity 0.2s;
	-webkit-transform: translateX(-50%) translateY(-50%) scale(0.8);
	-moz-transform: translateX(-50%) translateY(-50%) scale(0.8);
	-ms-transform: translateX(-50%) translateY(-50%) scale(0.8);
	-o-transform: translateX(-50%) translateY(-50%) scale(0.8);
	transform: translateX(-50%) translateY(-50%) scale(0.8); /*将制作的圆收缩到0.8倍?*/
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
}

.file:hover:before,
.file:hover:after {
	opacity: 1;
	-webkit-transform: translateX(-50%) translateY(-50%) scale(1);
	-moz-transform: translateX(-50%) translateY(-50%) scale(1);
	-ms-transform: translateX(-50%) translateY(-50%) scale(1);
	-o-transform: translateX(-50%) translateY(-50%) scale(1);
	transform: translateX(-50%) translateY(-50%) scale(1);/*将制作的圆恢倍*/
}

.file:hover{
    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.6);/*增加字体阴影*/
}
